<template>
    <view class="user-box">
        <view class="avatar-box"></view>
        <p class="user-name">{{ userName }}</p>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    // const avatar = ref('')
    const userName = ref('')
    userName.value = uni.getStorageSync('userInfo').userName
</script>

<style lang="less" scoped>
    .user-box {
        width: 100%;
        height: 500rpx;
        display: flex;
        flex-direction: column;;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(147, 197, 253, 0.8) 1%, rgba(96, 165, 250, 0.8) 99%);
        backdrop-filter: blur(8px);
        box-shadow: 0px 4px 16px 0px rgba(147, 197, 253, 0.15);
        .avatar-box {
            width: 200rpx;
            height: 200rpx;
            margin-bottom: 30rpx;
            border-radius: 50%;
            background-color: #fff;
        }
       .user-name {
            font-size: 32rpx;
            color: #fff;
       }
    }
</style>